Back to top

46 posts tagged with "webdev"

Get started with Vue 3 and Tailwindcss

Last week I wanted to setup a Vue.js v3 app with Tailwindcss and although many articles exists for that, I couldn’t get it done. The fact is that you need to use postcss to get your setup working, but with new version of Vue, the postcss config file is not picked up. So after a few try and errors, I finally got it working and thought to jot down what I went through to make it easier for my future self, and hopefully a few of my fellow developers around the world.

PublishedOct 22, 2020
Time to read10 min
showdevwebdevvueRead more

Find an item in an array with the new 'findIndex' method 🔎

Searching for items in an array has been the point of discussion for many years and debate on what is the best and optimum way for searching for objects has had many solutions, some effective and some not.

However, with the all new findIndex method on Array.prototype you have the flexibility to search for objects using your own comparison callback method.

PublishedOct 05, 2020
Time to read2 min
showdevwebdevjavascriptRead more

Take a selfie 🤳 using Image Capture API and a few lines of code

It’s been a while since I last wrote about Intersection Observer V2, partly because I had a lot on my plate and I was feeling exhausted and partly because I was working on my first PluralSight course on web performance for PWAs.

But I am back, and this time we’re going to review how to take a selfie from your webcam using Image Capture API.

PublishedSep 06, 2020
Time to read3 min
showdevwebdevjavascriptRead more

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

Chrome - where did save sessions go? 🤔

I remember a while back (not sure how long), Chrome had the ability to save all tabs when you closed the browser regardless of whether it was by accident or not. But they removed that ability and now if you close the window you will lose the tabs.

PublishedJun 17, 2020
Time to read3 min
showdevwebdevchromeRead more

Chrome - Arrange your tabs with tab groups 😍

If you’re one of those people with so many tabs open than you can manage, read on.

PublishedJun 15, 2020
Time to read1 min
showdevwebdevchromeRead 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

Stay on top of performance with Lighthouse CI 🚦

You’ve spent many hours trying to improve your web performance and have got it to a good speed. What happens next? How do you ensure it remains in good shape especially if you’re working in a team with diverse backgrounds and level of coding.

PublishedApr 13, 2020
Time to read9 min
webdevshowdevperformanceRead 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

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

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 read10 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 read20 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 read9 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 read8 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 😁.

Copy
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