Back to top

29 posts tagged with "webdev"

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

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

Transfer learning with Tensorflow.js

Tensorflow.js is a library which lets you perform machine learning in the browser or in Node. A while ago I wrote an intro on it and also gave a few talks including one which had a live demo where I re-trained the Speech Command model and flew a drone using my voice 😍. Many people asked about the details, so I decided to blog the whole thing down.

PublishedDec 16, 2019
Time to read9 min
showdevwebdevtensorflowjsRead more

Network Information API, another step towards a better web 😍

This year has been full of articles around how the web is bloated with static assets and how this has impacted users to face a poor user experience when using not so good networks around the world. There are resources like web.dev who are actively publishing content on how to make a better future for the web.

PublishedNov 18, 2019
Time to read6 min
showdevwebdevnetworkinformationRead more

State management in Vue.js

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. I’ve written three separate articles on it so far:

We will be looking at state management in Vue.js this time which is the centre of communication in large applications.

PublishedNov 18, 2019
Time to read9 min
showdevwebdevvuejsRead more

Handling forms with Vue.js 🧾

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. I’ve written two separate articles on it so far:

This time we will have a look at handling form with Vue.js, something which is almost inevitable in enterprise applications.

PublishedNov 10, 2019
Time to read11 min
showdevwebdevvuejsRead more

Deliver a better user experience using Vue.js Router 🛣️

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. I wrote a comprehensive intro a week or so ago and promised to continue adding more each week. This week is about Vue router and how it helps deliver a better user experience.

PublishedOct 30, 2019
Time to read11 min
showdevwebdevvuejsRead more

A comprehensive intro to Vue.js 🔥🚀

Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. This core library is focused on building the view layer only. It uses the goodies of Angular (such as template syntax) and React (such as Virtual DOM) and adds a few more enhancements on top.

PublishedOct 18, 2019
Time to read19 min
showdevwebdevvuejsRead more

React hooks you should know about 🔥

React Hooks are somewhat a new addition to React. They allow you to use React features without the need to use a class. But I am not going to go through an introduction in this post, there are many great into posts out there. This post shows you eight hooks and what you can achieve with them.

PublishedOct 06, 2019
Time to read8 min
showdevwebdevreactjsRead 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 build a game with Tensorflow.js in 10 minutes 🎮

I’ve been looking into Tensorflow.js recently and have found the whole concept fascinating. Previously I wrote a piece on how to get started, and I intent to write more around all aspects of creating a new model, transfer learning with it, or just use pre-trained models for inference.

PublishedSep 19, 2019
Time to read11 min
showdevwebdevtensorflowjsRead more

aria-live, accessibility tips 🦮

Last week I talked about JavaScript and AI using Tensorflow.js at ComponentsConf in Melbourne, Australia. The line up was a killer and I got to listen to some amazing talks, one of which got me hooked. It’s about accessibility and how we can be more inclusive by doing very little at our end.

PublishedSep 14, 2019
Time to read7 min
showdevwebdeva11yRead 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

Let's write HTML like a pro 😎

How often have you wrote a block of HTML without realising the code you’ve written might not be ideal?

PublishedSep 03, 2019
Time to read8 min
showdevwebdevhtmlRead 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 read7 min
showdevwebdevjavascriptRead more

Native lazy loading is landed in Chrome

Lazy loading resources is one of the important parts of web performance tuning, simply because offscreen resources can add a lot of weight to your page if loaded eagerly.

PublishedAug 25, 2019
Time to read4 min
showdevwebdevchromeRead more

6 points you need to know about async & await in JavaScript

If you have faced a code like below, then this article will help you in multiple ways 😁.

fetchPizzas()
  .then((pizzas) ={
    return sortByToppings(pizzas)
      .then((pizzas) ={
        return checkDeliveryOptions(pizzas)
          .then((pizzasWithDelivery) ={
            return checkBirthdayGift(pizzasWithDelivery)
              .then((pizza) ={
                return sendToCustomer(pizza);
              });
          });
      });
  });

PublishedAug 17, 2019
Time to read6 min
showdevwebdevasyncRead more

Firefox Developer Tools can do that?

It’s been a while since one of the X can do that posts I’ve been publishing. Furthermore, Firefox Developer tools is just getting better and better everyday, so I thought it’s about time I write one for it.

So, are you ready? 😎

PublishedAug 08, 2019
Time to read9 min
webdevfirefoxdevtoolsRead 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

Boost your ranking with these 10 tips

For most companies, ranking #1 is like a blessing to their business. However, most of the web developers are not aware of what should be done to reach to that point.

In this article we go through 10 simple steps to increase the ranking organically rather than paying search engines to do that for us. So, are you ready 🧐?

PublishedJun 11, 2019
Time to read10 min
webdevseoshowdevRead more

A world without passwords

Let’s face the reality, we can’t live without passwords these days. In fact our entire online life is depending on them. But with passwords, comes heaps of problems not only for users, but also for us developers.

PublishedJun 05, 2019
Time to read7 min
webdevwebauthnfrontendRead more

What`s new in Angular 8

You might already know that Angular 8 is out now, but what it means for you or your organisation is described below.

PublishedMay 30, 2019
Time to read6 min
angularwebdevshowdevRead 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

OffscreenCanvas - Render your graphics off the main thread

Rendering images on a web page can be a very compute heavy operation. This makes it harder to run these kind of operations on the main thread since it might slow down the rendering or affect the user experience.

PublishedMay 11, 2019
Time to read6 min
webdevtipsfrontendRead more